// pages/myCollection/myCollection.js
Page({
    data: {
      currentTab: 0,
      productList: [],
      articleList: [],
    },
  
    onLoad(options) {
      this.getCollectionData();
    },
  
    onPullDownRefresh() {
      this.getCollectionData(() => {
        wx.stopPullDownRefresh();
        wx.showToast({ title: '收藏列表已更新', icon: 'success' });
      });
    },
  
    getCollectionData(callback) {
      const mockProductList = [
        { id: 1, name: '专业美白牙膏', desc: '有效祛渍，提亮牙齿光泽', price: 89.00, image: '/assets/images/my/avatar.jpg' },
        { id: 2, name: '电动牙刷套装', desc: '声波震动，深层清洁牙缝', price: 299.00, image: '/assets/images/my/avatar.jpg' },
        { id: 3, name: '牙线棒（50支装）', desc: '细滑牙线，温和不刺激牙龈', price: 25.00, image: '/assets/images/my/avatar.jpg' },
      ];
      const mockArticleList = [
        { id: 1, title: '正确刷牙的6个步骤，90%的人都做错了', time: '2024-05-15', summary: '很多人每天刷牙却依然蛀牙，问题可能出在刷牙方式上...', cover: '/assets/images/my/avatar.jpg' },
        { id: 2, title: '牙齿敏感怎么办？这3个方法比吃药更有效', time: '2024-05-10', summary: '牙齿一碰到冷热酸甜就酸痛？可能是牙釉质受损了...', cover: '/assets/images/my/avatar.jpg' },
      ];
  
      setTimeout(() => {
        this.setData({ productList: mockProductList, articleList: mockArticleList });
        callback && callback();
      }, 500);
    },
  
    switchTab(e) {
      const index = parseInt(e.currentTarget.dataset.index);
      if (this.data.currentTab !== index) {
        this.setData({ currentTab: index });
      }
    },
  
    // 【最终、最稳定版本】使用CSS动画实现取消收藏
    cancelCollect(e) {
      const { type, id, index } = e.currentTarget.dataset;
      const listName = type === 'product' ? 'productList' : 'articleList';
  
      // 1. 播放爱心点击动画
      const newList = [...this.data[listName]];
      newList[index].isBeating = true;
      this.setData({ [listName]: newList });
  
      setTimeout(() => {
        wx.showModal({
          title: '取消收藏',
          content: '确定要取消收藏吗？',
          success: (res) => {
            if (res.confirm) {
              // 2. 触发列表项消失的CSS动画
              newList[index].isFading = true; // 添加 isFading 标志
              this.setData({ [listName]: newList });
  
              // 3. 等待CSS动画播放完毕 (400ms 与 CSS transition 时长一致)
              setTimeout(() => {
                // 4. 从数据数组中彻底移除该项
                newList.splice(index, 1);
                this.setData({ [listName]: newList });
                
                wx.showToast({ title: '已取消收藏', icon: 'success' });
  
                // 【重要】此处调用后端API同步数据
                /*
                wx.request({
                  url: 'https://your-domain.com/api/uncollect',
                  method: 'POST',
                  data: { type: type, resourceId: id },
                  // ...
                });
                */
  
              }, 400); 
  
            } else {
              // 用户点击“取消”，重置爱心状态
              newList[index].isBeating = false;
              this.setData({ [listName]: newList });
            }
          }
        });
      }, 200);
    },
  });